/**
 * loader  1、下载；2、使用（配置loader）
 * plugins 1、下载；2、引入；3、使用。
 *
 * hot module replacement 热更新。
 * 零、比如修改了css，那么就重新加载css，不会再加载js。
 * 1、style-loader内部实现。
 *
 * 一、js默认不能使用HMR
 * 1、需要修改js代码，这个一定要做HMR。
 * 2、模块热替换，只能处理非入口js文件。入口文件修改，所有的都要修改。
 *
 * 二、html默认不能使用HMR。
 * 1、入口文件增加html。
 * 2、可是更新之后，所有的模块都会更新。所以不需要做html功能。
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: [
    resolve(__dirname, './src/index.js'),
    resolve(__dirname, './src/index.html'),
  ],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      // 处理样式资源
      {
        test: /\.less$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.css$/,
        // 使用多个loader处理用use
        use: ['style-loader', 'css-loader'],
      },
      // 处理样式中的图片资源
      // 无法在html中通过src引用图片，只能在css中引入。
      {
        test: /\.(jpg|png|gif)$/,
        // 处理样式文件中的图片url的路径问题的。
        // 需要下载 url-loader 和 file-loader
        loader: 'url-loader',
        options: {
          // 图片小于8kb，就会被base64处理。也就是写入css中。
          // 有点：减少请求数量，减轻服务器压力。
          // 缺点：图片体积会更大，文件请求速度更慢。
          limit: 8 * 1024,
          // html-loader使用commonjs去解析，而url-loader使用es6解析，所以这里需要这样设置。
          esModule: false,
          name: '[hash:10].[ext]',
          outputPath: 'imgs',
        },
      },
      {
        test: /\.html$/,
        // 处理html文件的img图片，负责引入图片，然后能被url-loader处理。
        loader: 'html-loader',
      },
      // 除了html/js/css资源，都叫其它资源
      // 这里的正则表达式是“分组”，就是使用 ()
      // 所以()被称为捕获分组，用来捕获数据，
      // 当我们想要从匹配好的数据中提取关键数据的时候可以使用分组。
      // 这里要排除上面的所有资源
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media',
        },
      },
    ],
  },
  plugins: [
    // html-webpack-plugin
    // 默认创建一个空的html文件，引入打包输出的所有资源（js/css）
    // 需求：需要有结构额html文件
    new HtmlWebpackPlugin({
      // 复制这个html文件，并且引入打包输出的所有资源（js/css）
      // 也就是上面的loader不要再引入css-loader等等配置了。
      template: resolve(__dirname, './src/index.html'),
    }),
  ],
  /**
   * 开发服务器，用来自动编译，自动打开浏览器，自动刷新浏览器
   * 特点：只会在内存中编译打包，不会有任何 输出
   * 启动devServer指令：npx webpack-dev-server
   */
  devServer: {
    contentBase: [resolve(__dirname, 'build')],
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 3000,
    open: true,
    // 开启HMR功能
    hot: true,
  },
  // 这里一定要加这个，否则不会热更新的。
  target: 'web',
  mode: 'development',
  // mode: 'production',
}
